<script lang="ts">
  import Card from '../components/card.svelte';
  import { createEventDispatcher } from 'svelte';
  
  const dispatch = createEventDispatcher();
  
  export let pageData: Record<string, any> = {};
</script>

<div class="stats-container">
    <Card padding="4px 20px">
      <div class="flex justify-around w-full">
        <div class="amount">{pageData.totalOrderAmount?.toFixed(2) || '0.00'}</div>
        <div class="amount">{pageData.todayOrderAmount?.toFixed(2) || '0.00'}</div>
      </div>
    </Card>
 
  <div class="flex justify-around w-full mt-4">
    <div class="label">本月成功订单金额</div>
    <div class="label">今日成功订单金额</div>
  </div>

  <!-- <div class="stat-item">
    <div class="amount">{pageData.totalOrderAmount?.toFixed(2) || '0.00'}</div>

  </div>
  <div class="divider"></div>
  <div class="stat-item">
    <div class="amount">{pageData.weekOrderAmount?.toFixed(2) || '0.00'}</div>
  
  </div> -->
</div>

<style>
  .stats-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    background: rgba(101, 132, 226, 0.1);
    padding: 2rem 2rem;
    border-radius: 8px;
    color: white;
  }

  .stat-item {
    flex: 1;
    text-align: center;
  }

  .divider {
    width: 2px;
    height: 70%; /* 分割线高度 */
    background-color: rgba(135, 206, 235, 0.3); /* 浅蓝色 */
    border-radius: 1px;
  }
  .amount {
    font-size: 2.4rem;
    font-family: electronicFont;
    font-weight: bold;
  }
  .label {
    font-size: 1.2rem;
    color: #8e91b6;
  }
</style>